import React from 'react';
const TestComponent = React.createClass({
	getInitialState:function(){
		return {inputText : 'NULL',width:10}
	},
	handleClick:function(){
		this.setState({inputText:this.refs.myTextInput.value})
	},
	componentDidMount:function(){
		setInterval(function(){
			var width = this.state.width;
			width += 10;
			if(width >500){
				width = 10
			}
			this.setState({width:width})
		}.bind(this),100)
	},
	render:function() {
		const items = ['devil','lebron','mike']
		return (
			<div>
				<h2>Components Test</h2>
				<span>Hello Devil </span>
				<h2>Items Test</h2>
				{
					items.map(function(item){
						return <p>Hello {item}</p>
					})
				}
				<h2>Components Props Test</h2>
				<p>Hello {this.props.name}</p>
				<h2>Get Reality Dom Test</h2>
				<div>
					<input type = 'text' ref = 'myTextInput' />
					<input type = 'button' value = 'focus input' onClick = {this.handleClick} />
					<span>You Input : {this.state.inputText}</span>
				</div>
				<h2>Components Life Cycle</h2>
				<div>
					<div style = {{backgroundColor:'#fff',width:this.state.width,height:'20px'}}>
					</div>
				</div>
			</div>
		);
	}
});

export default TestComponent;